<style>
    .proSec6{
        margin-top: 8%;
    }
    .proSec6_list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .proSec6_list li{
        width: calc((100% - 60px)/4);
        margin-right: 20px;
        cursor: pointer;
    }
    .proSec6_list li:nth-child(4n){
        margin-right: 0;
    }
    .proSec6_list li:nth-child(n+5){
        margin-top: 20px;
    }
    .proSec6_img {
        width: 100%;
        overflow: hidden;
    }
    .proSec6_img .tilt {
        position: absolute;
        top: 0
    }
    .proSec6_img img{
        max-width: 100%;
        max-height: 80%;
        transition: all 0.3s ease-in-out;
    }
    .proSec6_list li:hover .proSec6_img img{
        transform: scale(1.1);
    }
    .proSec6_imgBox {
        position: relative;
        height: 0;
        padding-bottom: 600px;
        overflow: hidden
    }
    .showSec2_con{
        position: fixed;
        z-index: 9;
    }
</style>
<!--  / warpper  -->
<main class="warpper" id="app">
    <div class="proSec6">
        <div class="container">
            <ul class="proSec6_list">

                <li v-for="(item, key) in Data">
                    <div class="proSec6_img">
                        <img :src="'__CDN__'+item.image" />
                    </div>
                </li>

            </ul>
        </div>
        <!-- 弹出框 -->
        <div class="showSec2_con" v-for="(item, key) in Data">
            <!-- 商品切换轮播 -->
            <div class="swiper-container showSec2Swiper">
                <div class="swiper-wrapper">

                    <div class="swiper-slide" v-for="(item1, key1) in item.images">
                        <div class="showSec2Swiper_img">
                            <img :src="item1" alt="">
                        </div>
                    </div>

                </div>
                <div class="showSec2Swiper_btn showSec2Swiper_prev">
                    <img src="/static/images/prev2.png" alt="">
                </div>
                <div class="showSec2Swiper_btn showSec2Swiper_next">
                    <img src="/static/images/next2.png" alt="">
                </div>
            </div>
        </div>
    </div>

</main>
<!--  / warpper  -->
<script>

    new Vue({
        el: "#app",
        data() {
            return {
                id: "{$id}",
                Data: [],
                offset: 1,
                limit: 8,
                total: 0,
                totalPage: 0,
                currentPage: 1,
                dataLoading: false,
            }
        },
        created() {
            this.getProductPageList();
        },
        mounted() {
            let that = this;
            window.onscroll=(e)=>{
                const scrollH = document.documentElement.scrollHeight;// 文档的完整高度
                const scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 当前滚动条的垂直偏移
                const screenH = window.screen.height;  // 屏幕可视高度 ;
                if (scrollH - scrollT - screenH <= 0) {
                    //执行请求接口
                    if(that.totalPage <= that.currentPage) return;//判断若下一页没有则截停
                    if(!that.dataLoading) this.more();
                }
            }
        },
        methods: {
            // 获取列表
            getProductPageList() {
                //加载层-风格3
                layer.load(2);
                let that = this;

                if(!that.dataLoading){
                    that.dataLoading = true;
                }else{
                    return false;
                }

                let id = that.id,
                    page = that.offset,
                    limit = that.limit;
                let dataAc = {
                    id,
                    page,
                    limit,
                };
                $.ajax({
                    url: '/api/index/getProductPageList',
                    loading: false,
                    type: 'GET',
                    data: dataAc,
                    success: function (res) {
                        layer.closeAll('loading');
                        that.Data = that.Data.concat(res.data.data);
                        that.total = res.data.total;
                        that.totalPage = res.data.last_page;
                        that.currentPage = res.data.current_page;
                        that.dataLoading = false;
                        return false;
                    },
                    error: function (res) {
                        layer.closeAll('loading');
                        layer.msg(res.responseJSON.msg, {
                            icon: 0,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        });
                    }
                })
            },

            // 更多
            more() {
                let that = this;
                that.offset = that.offset + 1;
                that.getProductPageList();
            },


        },
        watch: {

        },
    })

    $(function () {

        // 当前js
        // 弹出轮播
        $('body').on('click', '.proSec6_list li', function () {
            $('.showSec2_con').eq($(this).index()).fadeIn();
            var showSec2Swiper = new Swiper('.showSec2Swiper', {
                loop: true,
                speed: 1200,
                observer: true,
                observeParents: true,
                prevButton: '.showSec2Swiper_prev',
                nextButton: '.showSec2Swiper_next',
            })
        })
        // 关闭弹出
        $('body').on('click', '.showSec2Swiper_img', function (event) {
            event.stopPropagation();
            $('.showSec2_con').fadeOut();
        })
        $('body').on('click', '.showSec2Swiper_img img', function (event) {
            event.stopPropagation();
            return false;
        })


        // 下方都是注释的历史js

        // 左侧小图轮播
        var proSec2Swiper = new Swiper('.proSec2Swiper', {
            initialSlide: 1,
            loop: true,
            speed: 1000,
            observer: true,
            observeParents: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            simulateTouch: false,
        })
        // 右侧大图
        var proSec2Swiper2 = new Swiper('.proSec2Swiper2', {
            loop: true,
            speed: 1000,
            observer: true,
            observeParents: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            simulateTouch: false,
        })
        // 点击左侧切换下一张
        $('body').on('click', '.proSec2Swiper', function () {
            proSec2Swiper.slideNext();
            proSec2Swiper2.slideNext();
        })


        // 上下滚动轮播
        var indSec2_swiper = new Swiper('.indSec2_swiper', {
            loop: true,
            direction: 'vertical',
            freeMode: true,
            speed: 8000,
            autoHeight: true,
            observer: true,
            observeParents: true,
            autoplay: true,
            disableOnInteraction: true,
            slidesPerView: 'auto',
            spaceBetween: 80,
            simulateTouch: false,
        })
        // 鼠标悬浮停止轮播、移开恢复轮播
        $('body').on('mouseover', '.indSec2_swiper', function () {
            indSec2_swiper.setWrapperTranslate(indSec2_swiper.getWrapperTranslate());
            indSec2_swiper.stopAutoplay();
        })
        $('body').on('mouseleave', '.indSec2_swiper', function () {
            indSec2_swiper.startAutoplay();
            indSec2_swiper.setWrapperTranslate(indSec2_swiper.getWrapperTranslate() - 500);
        })

    })

    $(window).ready(function () {
        $('.headerNav:first-child li').eq(2).addClass('on');
    })
    $(window).load(function () {
        if ($(window).width() <= 768) {
            $('.advSec1,.proSec2,.proSec3').addClass('on');
        }
    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()

        for (var i = 0; i < $('.proSec5_list li').length; i++) {
            if (h > $('.proSec5_list li').eq(i).offset().top - $(window).height() / 0.7) {
                $('.proSec5_list li').eq(i).addClass('on');
            }
        }


    })

</script>

